<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>
<body>
    <div id='app'>

    </div>
    <script>
        Vue.config.productionTip = false;

        Vue.prototype.$bus='laowanggonjiaoche'
        const Count = Vue.extend({
            name:'Count',
            data(){
                return{
                    count:1
                }
            },
            template:`
            <div>
            <h1>{{count}}</h1>
            <button @click='count++'>累加</button>
            <br/>
            <button @click='test'>测试</button>
            </div>
            `,
            methods:{
                test(){
                    console.log(this.$bus);
                }
            }
        })
        const Person = Vue.extend({
            name:'Person',
            data(){
                return{
                    name:'laowangba',
                    age:18
                }
            },
            template:`
            <button @click='test'>测试</button>
            `,
            methods:{
                test(){
                    console.log(this.$bus);
                }
            }
        })
        console.log(new Count(),'new Count()是Count组件实例');
        console.log(new Count().__proto__,'向上一级找到了当前VueComponent构造函数的原型对象');
        console.log(new Count().__proto__.__proto__,'再向上一级找到了Vue的原型对象上了');
        console.log(new Count().__proto__.__proto__.__proto__,'再向上一级找到了Object的原型对象上了');
        console.log(new Count().__proto__.__proto__.__proto__.__proto__,'再向上一级找到了null');

        /* 
        组件实例的原型链
            Count组件实例-->Count的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null

        实际使用:
            当我们想要给所有的组件实例扩展一些方法或者属性的时候,我们可以把这个方法和属性添加在Vue的原型对象上
            [[!!!切记  不能添加在VueComponent上,因为不同的组件 不是同一个VueComponent 但是Vue只有一个]]
        */
        const vm = new Vue({
            el:'#app',
            components:{
                Count,
                Person
            },
            data(){
                return {
                
            }
            },
            template:`
            <div>
                <Count/>
                <hr/>
                <br/>
                <Person/>
            </div>
            `
    })
    </script>
</body>
</html>